
<template>
  <div class="dashboard-container">
    <div class="container">
      <el-card shadow="never">
        <el-form
          :model="requestParameters"
          ref="requestParameters"
          label-width="80px"
        >
          <div class="filter-container">
            <el-row type="flex">
              <el-col :span="20">
                <el-form-item label="关键字：" prop="keyword"
                  ><el-input
                    @keyup.enter="handleFilter"
                    style="width: 180px"
                    placeholder="根据编号搜索"
                    class="filter-item"
                    v-model="requestParameters.keyword"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" style="text-align: right">
                <el-button size="small" @click="resetData">清除</el-button>
                <el-button size="small" type="primary" @click="handleFilter"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        >
        </el-alert>
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="编号" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题型"
            prop=" questionType"
            width="100"
          >
            <template slot-scope="scope">
              <!-- <span>{{scope.row.questionType}}</span> -->
              <p v-if="scope.row.questionType === '1'">单选</p>
              <p v-else-if="scope.row.questionType === '2'">多选</p>
              <p v-else>简答</p>
            </template>
          </el-table-column>
          <el-table-column
            label="题目编号"
            prop="questionIDs"
            width="240"
          >
            <template slot-scope="scope">
              <!-- <span>{{scope.row.questionIDs}}</span> -->
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <a
                  href="javascript:;"
                  style="color: rgb(0, 153, 255)"
                  class="number"
                  @click="preview(item.id)"
                  >{{ item.number }}</a
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addTime" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.addTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="答题时间(s)"
            prop="totalSeconds"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.totalSeconds }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="正确率(%)"
            prop="accuracyRate"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.accuracyRate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="录入人"
            prop="userName"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                plain
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                v-if="scope.row.status != 'deleted'"
                @click="remove(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align: right; margin-top: 20px; margin-bottom: 15px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(requestParameters.page)"
          :total="Number(total)"
          :page-size="Number(requestParameters.pagesize)"
          :page-sizes="[10, 20, 30, 50]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
        <!-- 分页end -->
      </el-card>
    </div>
    <questions-preview :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"></questions-preview>
  </div>
</template>

<script>
import questionsPreview from '../components/questions-preview.vue'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsList',
  data () {
    return {
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      questionItem: {},
      alertText: '',
      dialogVisible: false,
      requestParameters: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      items: {
        id: '',
        addTime: '',
        userName: '',
        questionIDs: '',
        progressOfAnswer: '',
        accuracyRate: '',
        totalSeconds: '',
        questionType: ''
      }
    }
  },
  created () {
    const _this = this
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  methods: {
    initialDate () {
      // 读取数据
      this.getList()
    },
    async getList (params) {
      this.listloading = true
      const { data: res } = await randoms(this.requestParameters)
      this.dataList = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 预览
    async preview (id) {
      try {
        const { data } = await detail({ id })
        this.questionItem = data
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },
    // 删除题组
    async remove (item) {
      const res = await this.$confirm(
        '此操作将永久删除该题组, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (res === 'confirm') {
        const data = await removeRandoms(item)
        this.getList()
        this.$message.success('删除成功')
      }
    },

    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    resetData () {
      this.requestParameters = ''
    },
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    query () {
      this.formData = {}
    }
  },
  components: {
    questionsPreview
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}

.pagination {
  margin-top: 10px;
}
.container {
    padding: 0 10px;
    margin: 10px 0;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}

.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}

.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}

.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.number {
  display: inline-block;
}
</style>

